<template>
  <div>
    <el-card>
      <p class="fenlei">
         <el-button style="border:0" @click="all" class="fenb">全部分类</el-button> 
         <el-button v-for="item of tableData" :key="item.id" style="border:0" class="fenb" @click="fen(item.id)">
          {{ item.cateName }}
          </el-button> 

        <el-button type="primary" icon="el-icon-circle-plus-outline" class="tian" @click="add">添加题目</el-button>
        <!-- <el-button type="warning" icon="el-icon-warning-outline" class="tian" @click="wei">未通过题目</el-button> -->
      </p>
      <p>
        <span>
          题目名称:<el-input v-model="queryInfo.input" placeholder="请输入内容" clearable @input="search" @clear="clear" />
        </span>
        <span>
          题目状态:<el-select v-model="status" placeholder="请选择" @change="change">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :selected="item.label=='通过' ? true : false"
          />
        </el-select>
        </span>
      </p>
      <el-table
        :data="qsttable"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="130px"
        />
        <el-table-column
          label="题目"
          prop="title"
        />
        <el-table-column
          label="类别"
        >
          <template slot-scope="scope">
            {{ scope.row.cata_o.cateName }}
            <!-- {{scope.row.cate.cateName }} -->
          </template>
        </el-table-column>
        <el-table-column
          label="上传者"
          prop="uploder"
        />
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button @click="xq(scope.row)"><a class="blue">详情</a></el-button>
            <el-button @click="upd(scope.row)"><a class="blue">编辑</a></el-button>
            <!-- <el-button v-else disabled @click="upd(scope.row)"><a class="qblue">编辑</a></el-button> -->
            <el-button @click="del(scope.row)"><a class="red">删除</a></el-button>
            <!-- <el-button v-else disabled @click="del(scope.row)"><a class="qred">删除</a></el-button>         -->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryInfo.t"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="添加题目" :visible.sync="dialogFormVisible">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上传者" prop="uploader">
          <el-input v-model="ruleForm.uploader" style="width:220px" />
        </el-form-item>
        <el-form-item label="题目分类" prop="cate">
          <el-select v-model="ruleForm.cate" placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.cateName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题目内容" prop="title">
          <el-input v-model="ruleForm.title" />
        </el-form-item>
        <el-form-item label="题目答案" prop="answer">
          <quill-editor
            ref="richAnalysis"
            v-model="ruleForm.answer"
            :options="editorOption"
            style="color:#333"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addsave">添 加</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改题目" :visible.sync="dialogFormVisible1">
    <el-form ref="ruleForm" :model="ruleForm2" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上传者" prop="uploader">
          <el-input v-model="ruleForm2.uploader" style="width:220px" />
        </el-form-item>
        <el-form-item label="题目分类" prop="cate">
          <el-select v-model="ruleForm2.cate_id" placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.cateName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题目内容" prop="title">
          <el-input v-model="ruleForm2.title" />
        </el-form-item>
        <el-form-item label="题目答案" prop="answer">
          <quill-editor
            ref="richAnalysis"
            v-model="ruleForm2.answer"
            :options="editorOption"
            style="color:#333"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="updsave">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ImageDrop } from 'quill-image-drop-module'
 import ImageResize from 'quill-image-resize-module'
 Quill.register('modules/imageDrop', ImageDrop);
 Quill.register('modules/imageResize', ImageResize);
 const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                     //引用，代码块
  [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，无序列表
  [{ 'script': 'sub' }, { 'script': 'super' }],     // 下角标，上角标
  [{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进
  [{ 'direction': 'rtl' }],                         // 文字输入方向
  [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题
  [{ 'color': [] }, { 'background': [] }],          // 颜色选择
  [{ 'font': [] }], // 字体
  [{ 'align': [] }],    // 居中
  ['clean'],            // 清除样式,
  ['link', 'image'],  // 上传图片、上传视频
]
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      qsttable: [],
      queryInfo: {
        input: '',
        size: 5,
        page: 1,
        t: 100
      },
      pageisornot: false,
      role: '',
      status:'',
      options: [{
        value: 1,
        label: '通过'
      }, {
        value: 2,
        label: '未通过'
      }],
      dialogFormVisible:false,
             // 富文本编辑器配置
      editorOption: {
        placeholder: '请在这里输入',
        theme: 'snow', //主题 snow：有工具栏的；bubble：只有文本域的
        history: {
          delay: 1000,
          maxStack: 50,
          userOnly: false
        },
        modules: {
          imageDrop: true,      //图片拖拽
          imageResize: {          //放大缩小
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          },
          toolbar: {
            container: toolbarOptions, //工具栏
            handlers: {
            }
          },
        }
      },
      option: [],
      ruleForm: {
        title: '',
        answer: '',
        uploader: '',
        cate: ''
      },
      dialogFormVisible1:false,
      ruleForm2: {
        id:'',
        title: '',
        answer: '',
        uploader: '',
        cate_id: ''
      },
      rules: {
        uploader: [
          { required: true, message: '请输入上传者', trigger: 'blur' }
        ],
        cate: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入题目', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getcate()
    this.getlei()
  },
  mounted() {},
  methods: {
    async getcate() {
      var res = await this.http.get('/knowledge/ques/', { params: this.queryInfo })
      var L=[]
      // console.log(res, '123')
      res.data.data.forEach(item=>{
          // console.log(item,'1123');
          if (item.status==1){
              L.push(item)
              
          }
      })
      console.log(L);
      //   var res=await this.http.get('/cateall')
      if (res.data.code == 200) {
            this.tableData = res.data.data1
            this.qsttable = L
            this.queryInfo.t = L.length
      }
    },
    async fen(v) {
      var res = await this.http.get(`/knowledge/dques/${v}`)

      var L=[]
      res.data.data.forEach(item=>{
          if (item.status==1){
              L.push(item)           
          }
      })
      if (res.data.code == 200) {
        this.qsttable = L
      }
    },
    add() {
      this.dialogFormVisible=true
    },
    all() {
      this.getcate()
    },
    handleSizeChange(v) {
      this.queryInfo.size = v
      this.getcate()
    },
    handleCurrentChange(v) {
      this.queryInfo.page = v
      this.getcate()
    },
    xq(row) {
      this.$router.push({ path: '/xq', query: { id: row.id ,info:'题目管理'}})
    },
    del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        var res = await this.http.delete(`/knowledge/dques/${row.id}`)
        if (res.data.code == 200) {
          this.getcate()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: '没有权限!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    upd(row) {
      this.dialogFormVisible1=true
      this.ruleForm2.id=row.id
      this.ruleForm2.title=row.title
      this.ruleForm2.answer=row.answer
      this.ruleForm2.uploader=row.uploder
      this.ruleForm2.cate_id=row.cate_id
    },
    async updsave() {
      var res = await this.http.put(`/knowledge/dques/`, this.ruleForm2)
      if (res.data.code == 200) {
        this.dialogFormVisible1=false
        this.$message.success('修改题目成功')
        this.getcate()
      } else {
        this.$message.error('修改题目失败')
      }
    },
    async search() {
      this.getcate()
    },
    clear() {
      this.getqst()
    },
    wei() {
      this.$router.push('/weitong')
    },
    async change(){
      console.log(this.status)
      if(this.status==1){
        this.getcate()
      }else if(this.status==2){

        var res = await this.http.get('/knowledge/ques/', { params: this.queryInfo })
        var L=[]
        if (res.data.code == 200) {     
          res.data.data.forEach(item=>{
            if (item.status==2){
              L.push(item)               
            }
          })
          this.tableData = res.data.data1
          this.qsttable = L
          this.queryInfo.t = L.length
        }
      }
    },
    async getlei() {
      var res = await this.http.get('/knowledge/lei/')
      if (res.data.code == 200) {
        this.option = res.data.data
      }
    },
    async addsave() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          var res = await this.http.post('/knowledge/ques/', this.ruleForm)
          console.log(res)
          if (res.data.code == 200) {
            this.dialogFormVisible=false
            this.$message.success('添加题目成功')
            this.getcate()
            this.ruleForm={
                  title: '',
                  answer: '',
                  uploader: '',
                  cate: ''
            }
          } else {
            this.$message.error('添加题目失败')
          }
        } else {
          this.$message.error('格式错误')
        }
      })
    },
  }
}
</script>
<style scoped>
    .fenlei{
      padding-bottom: 20px;
    }
    .fenb{
      /* padding-right: 0;
      padding-left: 0; */
      padding: 0;
      background: 0;
      margin-right: 25px;
      /* color: #303133; */
      font-size: 15px;
    }
    .el-card p{
      margin-bottom: 10px;
    }
    .el-input{
      width: 200px;
      margin-left: 5px;
    }
    .el-select{
      margin-left: 5px;
    }
    .tian{
        float: right;
    }
    .el-table{
      margin-top: 15px;
    }

    .el-pagination{
      margin-top: 20px;
      text-align: center;
    }
    .el-table .el-button{
      background: 0;
      padding-left: 0;
      padding-right: 0;
      display: inline-block;
      border:0;
    }
    .blue{
      color: #3175fb;
    }
    .qblue{
      color: #B0C4DE;
    }
    .red{
      color: red;
    }
    .qred{
      color: #f6caca;
    }
    /* .quill-editor{
      height: 100px;
    } */
</style>
